<!--suppress ALL -->
<include file="./Template/header.html" />


<link rel="stylesheet" type="text/css" href="/Template/css/chart.css?v=5">

<link rel="stylesheet" type="text/css" href="/Template/css/jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="/Template/css/examples.css" />
<script type="text/javascript" src="/Template/js/jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jquery.jqplot.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.cursor.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="/Template/js/plugins/excanvas.js"></script>

<style type="text/css">
    .jqplot-cursor-legend {
        width: 160px;
        font-family: "Courier New";
        font-size: 0.85em;
    }

    td.jqplot-cursor-legend-swatch {
        width: 1.3em;
    }

    div.jqplot-cursor-legend-swatch {
        /*      width: 15px;*/
    }

    * {
        /*初始化样式*/
        margin: 0;
        padding: 0;
    }
    html {
        /*用于 获取 屏幕的可视宽高*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body {
        /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /*用于 测试的 样式*/
        /*background-color: #444;*/
        /*color: #FFF;*/
        /*letter-spacing: 4px;*/
        /*font-size: 28px;*/
        /*文字居中*/
        display: flex;
        /*justify-content: center;*/
        /*align-items: center;*/
    }
    @media screen and (orientation:portrait) {
        /*竖屏样式*/
        body {
            transform-origin: 0 0;
            transform: rotateZ(90deg) translateY(-100%);
        }
    }
</style>

<script type="text/javascript" language="javascript">

    function resize() {
        var body = document.getElementsByTagName('body')[0];
        var html = document.getElementsByTagName('html')[0];
        var width = html.clientWidth;
        var height =  html.clientHeight;
        var max = width > height ? width : height;
        var min = width > height ? height : width;
        body.style.width = max + "px";
        body.style.height = min + "px";
    }
    resize();
    window.addEventListener("resize", resize)

    $(document).ready(function(){
        setChart();
    });


    function resetChart(){
        var date_all=[],i=0;
        var start;
        var end;
        var dateRange = $("select[name=dateRange]").val();
        if(dateRange == 0){
            var start = $("#startdate").val();
            var end = $("#enddate").val();
        }
        else{
            var Nowdate = new Date();
            var vYear = Nowdate.getFullYear();
            var vMon = Nowdate.getMonth() + 1;
            var vDay = Nowdate.getDate();
//每个月的最后一天日期（为了使用月份便于查找，数组第一位设为0）
            var daysInMonth = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
            if(vMon==1){
                vYear = Nowdate.getFullYear()-1;
                vMon = 12;
            }else{
                vMon = vMon -dateRange;
            }
//若是闰年，二月最后一天是29号
//            if(vYear%4 == 0 && vYear%100 != 0 || vYear%400 = 0 ){
//                daysInMonth[2]= 29;
//            }
            if(daysInMonth[vMon] < vDay){
                vDay = daysInMonth[vMon];
            }
            if(vDay<10){
                vDay="0"+vDay;
            }
            if(vMon<10){
                vMon="0"+vMon;
            }
            start =vYear+"-"+ vMon +"-"+vDay;
            end = Nowdate.getFullYear()+"-" + (Nowdate.getMonth()+1) + "-" + Nowdate.getDate();

        }

        var startTime = getDate(start);
        var endTime = getDate(end);
        while((endTime.getTime()-startTime.getTime())>=0){
            var year = startTime.getFullYear();
            var month = (startTime.getMonth()+1).toString().length==1?"0"+(startTime.getMonth()+1).toString():(startTime.getMonth()+1).toString();
            var day = startTime.getDate().toString().length==1?"0"+startTime.getDate():startTime.getDate();
            date_all[i]=month+"/"+day+"/"+year;
            startTime.setDate(startTime.getDate()+1);
            i+=1;
        }

        $.jqplot.config.enablePlugins = true;
        var yaxismin=12;//全部订单起始x坐标
        var yaxismax=24;//全部订单起始x坐标
        var y2axismin=0;//支付订单起始x坐标
        var numberTicksmax=12;//x坐标行数
        //全部订单
//        alert("{$chartList.08/24/2018}");

        var ticks = new Array();
        var InPr = new Array();
//        var chartList = JSON.parse("{$chartJson}");
//        var jsonstr =eval("{$chartJson}");
//        alert(jsonstr);
//        var a = new Array();
        var chartList = JSON.parse('{$chartJson}');

        for(var i = 0;i < date_all.length; i++){
            ticks[i] = date_all[i];
            if(isNullOrEmpty(chartList[date_all[i]])){
                InPr[i] = [date_all[i],0];
            }else{
                InPr[i] = [date_all[i],chartList[date_all[i]]];
            }
//            alert(InPr[i]);
        }
        plot1.series[0].data = InPr;
        plot1.resetAxesScale();
        plot1.replot();
    }

    function setChart(){
        var date_all=[],i=0;
        var start;
        var end;
        var dateRange = $("select[name=dateRange]").val();
        if(dateRange == 0){
            var start = $("#startdate").val();
            var end = $("#enddate").val();
        }
        else{
            var Nowdate = new Date();
            var vYear = Nowdate.getFullYear();
            var vMon = Nowdate.getMonth() + 1;
            var vDay = Nowdate.getDate();
//每个月的最后一天日期（为了使用月份便于查找，数组第一位设为0）
            var daysInMonth = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
            if(vMon==1){
                vYear = Nowdate.getFullYear()-1;
                vMon = 12;
            }else{
                vMon = vMon -dateRange;
            }
//若是闰年，二月最后一天是29号
//            if(vYear%4 == 0 && vYear%100 != 0 || vYear%400 = 0 ){
//                daysInMonth[2]= 29;
//            }
            if(daysInMonth[vMon] < vDay){
                vDay = daysInMonth[vMon];
            }
            if(vDay<10){
                vDay="0"+vDay;
            }
            if(vMon<10){
                vMon="0"+vMon;
            }
            start =vYear+"-"+ vMon +"-"+vDay;
            end = Nowdate.getFullYear()+"-" + (Nowdate.getMonth()+1) + "-" + Nowdate.getDate();

        }

        var startTime = getDate(start);
        var endTime = getDate(end);
        while((endTime.getTime()-startTime.getTime())>=0){
            var year = startTime.getFullYear();
            var month = (startTime.getMonth()+1).toString().length==1?"0"+(startTime.getMonth()+1).toString():(startTime.getMonth()+1).toString();
            var day = startTime.getDate().toString().length==1?"0"+startTime.getDate():startTime.getDate();
            date_all[i]=month+"/"+day+"/"+year;
            startTime.setDate(startTime.getDate()+1);
            i+=1;
        }
        $.jqplot.config.enablePlugins = true;
        var yaxismin=12;//全部订单起始x坐标
        var yaxismax=24;//全部订单起始x坐标
        var y2axismin=0;//支付订单起始x坐标
        var numberTicksmax=12;//x坐标行数
        //全部订单
//        alert("{$chartList.08/24/2018}");

        var ticks = new Array();
        var InPr = new Array();
//        var chartList = JSON.parse("{$chartJson}");
//        var jsonstr =eval("{$chartJson}");
//        alert(jsonstr);
//        var a = new Array();
        var chartList = JSON.parse('{$chartJson}');
        var duration = 0;
        for(var i = 0;i < date_all.length; i++){
            ticks[i] = date_all[i];
            if(isNullOrEmpty(chartList[date_all[i]])){
                InPr[i] = [date_all[i],0];
            }else{
                InPr[i] = [date_all[i],chartList[date_all[i]]];
                duration += chartList[date_all[i]];
            }
//            alert(InPr[i]);
        }
        var average = (duration / date_all.length).toFixed(1);
        var titleStr = "每天平均穿戴时间：" + average + " 小时";
        var interval = Math.round(date_all.length/30) + " days";

//        var InPr = [['09/01/2011','300'],['09/02/2011',0],['09/03/2011',431],['09/04/2011',61],['09/05/2011',321],['09/06/2011',322],['09/07/2011',620],['09/08/2011',298],['09/09/2011',100],['09/10/2011',200],['09/11/2011',231],['09/12/2011',120],['09/13/2011',121],['09/14/2011',100],['09/15/2011',200],['09/16/2011',231],['09/17/2011',158],['09/18/2011',100],['09/19/2011',200],['09/20/2011',100],['09/21/2011',200],['09/22/2011',231],['09/23/2011',21],['09/24/2011',100],['09/25/2011',200],['09/26/2011',231],['09/27/2011',21],['09/28/2011',121],['09/29/2011',122],['09/30/2011',520]];

        //支付成功的订单
//        var OutPr = [['09/01/2011',180],['09/02/2011',110],['09/03/2011',241],['09/04/2011',31],['09/05/2011',131],['09/06/2011',132],['09/07/2011',530],['09/08/2011',222],['09/09/2011',110],['09/10/2011',210],['09/11/2011',241],['09/12/2011',130],['09/13/2011',131],['09/14/2011',110],['09/15/2011',210],['09/16/2011',241],['09/17/2011',168],['09/18/2011',110],['09/19/2011',210],['09/20/2011',110],['09/21/2011',210],['09/22/2011',241],['09/23/2011',31],['09/24/2011',110],['09/25/2011',210],['09/26/2011',241],['09/27/2011',31],['09/28/2011',131],['09/29/2011',132],['09/30/2011',530]];

//        var ticks = ['09/01/2011', '09/02/2011', '09/03/2011', '09/04/2011', '09/05/2011', '09/06/2011', '09/07/2011', '09/08/2011', '09/09/2011', '09/10/2011', '09/11/2011', '09/12/2011', '09/13/2011',
//            '09/14/2011','09/15/2011','09/16/2011','09/17/2011','09/18/2011','09/19/2011','09/20/2011','09/21/2011','09/22/2011','09/23/2011','09/24/2011','09/25/2011','09/26/2011','09/27/2011','09/28/2011','09/29/2011','09/30/2011'];
        plot1 = $.jqplot('chart1', [InPr], {
            title: titleStr, //标题
            seriesDefaults:{
                neighborThreshold:0,
                show: true,
                showMarker: true,
                lineWidth: 3,
                markerOptions: {
                    show: false,             // 是否在图中显示数据点
                    style: 'filledCircle', // 各个数据点在图中显示的方式，默认是"filledCircle"(实心圆点),
                    //其他几种方式circle，diamond, square, filledCircle，
                    // filledDiamond or filledSquare.
//                    lineWidth: 2,       // 数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点）
                    size: 14,            // 数据点的大小
                    color: '#666666',   // 数据点的颜色
                    shadow: false,       // 是否为数据点显示阴影区（增加立体效果）
                    shadowAngle: 45,    // 阴影区角度，x轴顺时针方向
                    shadowOffset: 1,    // 参考grid中相同参数
                    shadowDepth: 3,     //参考grid中相同参数
                    shadowAlpha: 0.07   // 参考grid中相同参数
                },
                rendererOptions: {
                    smooth: true
                },
            },// fill:true 阴影显示 注释掉后会显示点
            series:[
                {
                    color: '#eb5647',
                    showMarker: true,
                    showLine: true,
                    yaxis: 'yaxis',
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    },
                    label:' ',
                    breakOnNull: true,
                },

            ],
            cursor:{
                show:true,
                showVerticalLine:true,//是否显示竖线
                showTooltip: true,//鼠标移动时是否显示订单量
                followMouse: true,//订单量是否跟随鼠标移动，false显示在右下角，true随鼠标移动
                showTooltipDataPosition:true,
                zoom:true,//是否允许局部分析
                intersectionThreshold:6,
                tooltipFormatString: '%s 日期:%s, 时长:%s'
            },
            legend:{
                labels: '纵轴穿戴时间',
                show: false,//显示 全部订单 支付成功
                location:'nw'
            },
            axesDefaults:{},
            axes: {
                yaxis: {
                    renderer: $.jqplot.LogAxisRenderer,
                    tickDistribution:'power',
                    max:yaxismax,
                    min: yaxismin,

//                    base: 12,
                    ticks: [0,12,14,16,18,20,22,24],
//                    ticks: [0,6,12,13,14,15,16,17,18,19,20,21,22,23,24],
                    numberTicks:numberTicksmax,
                    showTicks: true,        //是否显示刻度线以及坐标轴上的刻度值,
                    showTickMarks: false,    // 设置是否显示刻度
                    tickOptions: {
//                        formatString: '%d',
                        showMark: false,     //设置是否显示刻度
                    },
                },
                y2axis: {
                    renderer: $.jqplot.LogAxisRenderer,
                    tickDistribution:'power',
                    max:yaxismax,
                    min: yaxismin,

//                    base: 12,
                    ticks: [0,6,12,14,16,18,20,22,24],
//                    ticks: [0,6,12,13,14,15,16,17,18,19,20,21,22,23,24],
                    numberTicks:numberTicksmax,
                    showTicks: true,        //是否显示刻度线以及坐标轴上的刻度值,
                    showTickMarks: false,    // 设置是否显示刻度
                    tickOptions: {
//                        formatString: '%d',
                        showMark: false,     //设置是否显示刻度
                    },
                },
                //全部订单起始x坐标
//                y2axis:{min: y2axismin, numberTicks:numberTicksmax},//支付订单起始x坐标
                xaxis: {
                    renderer:$.jqplot.DateAxisRenderer,
                    rendererOptions: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer
                    },
                    //ticks: ticks,
                    tickOptions:{
                        formatString:'%m/%d',
//                        fontFamily:'Tahoma',
                        fontSize:'12px',    //刻度值的字体大小
                        angle:-60 // 日期旋转角度
                    }  ,
//                    tickInterval: "5 days"
                    tickInterval: interval,
                    showTicks: true,        //是否显示刻度线以及坐标轴上的刻度值,
                    showTickMarks: false,    // 设置是否显示刻度
                },

            },

        });

        plot1.replot();
    }
    function getDate(datestr){
        var temp = datestr.split("-");
        var date = new Date(temp[0],temp[1]-1,temp[2]);
        console.log(date);
        return date;
    }

    function compareDate(){
        var startTime = new Date(Date.parse($("#startdate").val()));
        var endTime = new Date(Date.parse($("#enddate").val()));
        if(startTime < endTime){
            var days = endTime.getTime() - startTime.getTime();
            var time = parseInt(days / (1000 * 60 * 60 * 24));
            if(time > 183){
                return "日期间隔不能超过6个月";
            }
            else{
                return "";
            }
        }else{
            return "开始时间需小于结束时间";
        }
    }

</script>

<script type="text/javascript">

    $(function() {

        //初始化页面配置
//        initPage("穿戴统计表");
        initPage("穿戴统计表--"+"{$info.nickname}");

        var app = new Vue({
            el: '#container',
            data: {
                finishedProductList: [],
            },
            methods: {
                orderList: function() {
                    window.location.href = "/wechat/finishedProduct/orderList";
                },
                certificate: function(id) {
                    $(".container").css({"width":"100%","background":"url('/Template/images/cert"+id+".jpg')","background-repeat":"no-repeat","-moz-background-size":"100% 100%","background-size":"100% 100%"});
                    $(".search").css({"opacity":"0","height":"0rem"});
                    $(".jqPlot").css({"top":"-0.3rem"});
                },
            }
        })


        //日期插件
        var start = document.getElementById('startdate');
        start.onfocus = function(){
            this.removeAttribute('placeholder');
        };
        start.onblur = function(){
            if(this.value == '') this.setAttribute('placeholder','开始日期');
        };

        var end = document.getElementById('enddate');
        end.onfocus = function(){
            this.removeAttribute('placeholder');
        };
        end.onblur = function(){
            if(this.value == '') this.setAttribute('placeholder','结束日期');
        };

        $(".search-box").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().attr('placeholder',value);
        });


        $("select[name=dateRange]").change(function() {
            var dateRange = $(this).val();
            if(dateRange == 0){
                $(".date-start").removeAttr("disabled");;
                $(".date-end").removeAttr("disabled");;
            }else{
                $(".date-start").attr("disabled","disabled");
                $(".date-end").attr("disabled","disabled");
                setChart();
            }
        });
        $("#startdate").blur(function() {
            if(!isNullOrEmpty($("#enddate").val())){
                if(compareDate() != ""){
                    alert(compareDate());
                    return;
                }
                setChart();
            }
        });
        $("#enddate").blur(function() {
            if(!isNullOrEmpty($("#startdate").val())){
                if(compareDate() != ""){
                    alert(compareDate());
                    return;
                }
                setChart();
            }
        });

        $("select[name=medal]").change(function() {
            var medal = $(this).val();
            app.certificate(medal);
        });

        $("select[name=dateRange]").val(1);
        var value = $("select[name=dateRange]").find("option:selected").text();
        $("select[name=dateRange]").prev().attr('placeholder',value);

    });

</script>
<div class="container" id="container">
    <div class = "blank">
    </div>
    <div class = "search" name="myChart">
        <div class="class-search">
            <img class="lefthint" src="/Template/images/icon-checkin.png" alt="">
            <img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
            <input class="search-line" type="text" placeholder="时间区间" readonly>
            <select class="search-box" name="dateRange">
                <option value="1">近1个月</option>
                <option value="2">近2个月</option>
                <option value="3">近3个月</option>
                <option value="0">自定义</option>
            </select>
        </div>
        <if condition="$type eq 'all'">
            <div class="class-medal">
                <input style="background-color: transparent" class="search-line" type="text" readonly>
            </div>
        <else/>
            <div class="class-medal">
                <input class="search-line" type="text" placeholder="选择奖状" readonly>
                <select class="search-box" name="medal">
                    <option>请选择奖状</option>
                    <option value="1">奖状1</option>
                    <option value="2">奖状2</option>
                    <option value="3">奖状3</option>
                    <option value="4">奖状4</option>
                    <option value="5">奖状5</option>
                </select>
            </div>
        </if>
        <div class="date-search">
            <input type="text" style="display: none;" id="workorderType" value="{$type}">
            <input id="startdate" class="date-start" name="startdate" type="date" placeholder="开始日期" disabled>
            <input id="enddate" class="date-end" name="enddate" type="date" placeholder="结束日期" disabled>

        </div>
        <!--<img class="medalhint" src="/Template/images/icon-medal.png" alt="" v-on:click="certificate()">-->
        <!--<button class="certificate-button" v-on:click="certificate()">荣誉</button>-->
    </div>

    <div class="product-exihibate" id="jqChart">
        <ul>
            <li class="item">
                <div class="jqPlot" id="chart1"></div>
            </li>
        </ul>
    </div>
    <!--div class="image-show">
        <button id="b">button to get image</button><br>
        <img id="myIMG" />

    </div-->


</div>

<include file="./Template/footer.html" />

